// 联系人头像组件
import React from 'react';
import {Avatar, Badge} from "antd";
import {
    UserOutlined,
    CheckOutlined,
    WechatFilled
} from '@ant-design/icons';
import '../style.css';

const ProAvatar = (props: any) => {
    const { group } = props.item;
    // statue 在线状态
    // group  群聊
    let status = 1;
    const renderStatus = (status: number) => {
        switch (status) {
            case 0:
                return <CheckOutlined style={{
                    color: "#fff",
                    border: "2px solid #fff",
                    borderRadius: "50%",
                    backgroundColor: "red"
                }}/>;
            case 1:
                return <CheckOutlined style={{
                    color: "#fff",
                    border: "2px solid #fff",
                    borderRadius: "50%",
                    backgroundColor: "#64C8BC"
                }}/>;
            default:
                break;
        }
    };
    const renderSingerChat = () => {
        return (
            <div className="ProAvatar">
                <div className="avatarBox">
                    <div>
                        <Badge
                            style={{
                                backgroundColor: "red"
                            }}
                            size="small"
                            count={
                                renderStatus(status)
                            }
                            offset={[-6, 38]}
                            title="onLine"
                        >
                            <Avatar
                                size={44}
                                icon={<UserOutlined/>}
                            />
                        </Badge>
                    </div>
                    <div className="nameAndTipsWordBox">
                        <div className="name">Edward King</div>
                        <div className="tipsWord">
                            [16 Messages] Welcome to our m
                        </div>
                    </div>
                </div>
            </div>
        )
    };
    const renderGroupChat = () => {
        return(
            <div className="ProAvatar">
                <div className="avatarBox">
                    <div>
                        <Badge
                            style={{
                                backgroundColor: "red"
                            }}
                            size="small"
                            count={
                                renderStatus(status)
                            }
                            offset={[-6, 38]}
                            title="onLine"
                        >
                            <Avatar
                                size={44}
                                icon={<WechatFilled />}
                                style={{
                                    background: "#d2e6f4",
                                    color: "#146ec3"
                                }}
                            />
                        </Badge>
                    </div>
                    <div className="nameAndTipsWordBox">
                        <div className="name">Edward King</div>
                        <div className="tipsWord">
                            [16 Messages] Welcome to our m
                        </div>
                    </div>
                </div>
            </div>
        )
    };
    return (
        group ? renderGroupChat() : renderSingerChat()
    )
};

export default React.memo(ProAvatar);